<template>
  <div class="tu">
    <h3>全部商品</h3>
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="全选"
      width="120">
      <template slot-scope="scope"><el-image
      style="width: 100px; height: 100px"
      :src="scope.row.shangping"></el-image></template>
    </el-table-column>

    <el-table-column
      prop="date"
      label="商品"
      width="120">
    </el-table-column>

    <el-table-column
      prop="kucun"
      label="库存"
      show-overflow-tooltip>
    </el-table-column>

    <el-table-column
      prop="danjia"
      label="单价"
      show-overflow-tooltip>
    </el-table-column>

    <el-table-column
      prop="shuliang"
      label="数量"
      show-overflow-tooltip>
      <template slot-scope="scope">
<el-input-number v-model="scope.row.num" @change="handleChange" :min="1" :max="10"
label="描述文字"></el-input-number>
</template>
    </el-table-column>
  <el-table-column prop="danjia" label="小计" width="120">
  <template slot-scope="scope">
{{ scope.row.num*scope.row.danjia }}
</template>
</el-table-column>



    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <template>
<el-popconfirm
  title="确认取消"
><el-button slot="reference">全部取消</el-button></el-popconfirm>
</template>

  <template>
<el-popconfirm
  title="确认购买"
><el-button slot="reference">购买</el-button></el-popconfirm>
</template>

  <template>
<el-popconfirm
  title="这是一段内容确定删除吗？"
><el-button slot="reference">删除</el-button></el-popconfirm>
</template>

  </div>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: [{
          shangping:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          date: '智能腕表_壹代',
          kucun: '5',
          danjia: '128.00',
          shuliang:1,

        }, {
          shangping:'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          date: '智能腕表_贰代',
          kucun: '货源不足',
          danjia: '258.00',
          shuliang:1,
        }, {
          shangping:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          date: '健康检测一体机 单人机',
          kucun: '55',
          danjia: '1500.00',
         
          shuliang:1,
        }, {
          shangping:'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          date: '健康检测一体机 四人机',
          kucun: '55',
          danjia: '4800.00',
          shuliang:1,
        },]
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>